<template>
	<view class="reflect-page">
		<!-- 导航栏 -->
		<free-nav-bar textContent="提现" isBackShow isBackWhite></free-nav-bar>
		<view class="perfect-wrapper">
			<view class="perfect__head">
				<text class="text">可提现金额(元)</text>
				<text class="price">1860.00</text>
			</view>
			<view class="perfect__body">
				<view class="perfect__body--top">
					<view class="perfect__details">
						<view class="title main-text-color">提现金额</view>
						<view class="perfect__info flex">
							<view class="input-wrapper flex">
								<view class="label main-text-color">￥</view>
								<input class="input main-text-color" type="text" placeholder="输入提现金额">
							</view>
							<view class="perfect__all--btn">全部提现</view>
						</view>
					</view>
					<view class="perfect__to flex">
						<view class="perfect__to--title main-text-color">提现至</view>
						<view class="perfect__to--select flex">
							<view class="select__content main-text-color">请选择</view>
							<view class="select"><i class="sprite sprite-arrow-r"></i></view>
						</view>
					</view>
				</view>
				<view class="perfect__body--btns flex">申请提现</view>
			</view>
		</view>
		<hqs-popup title="种植果类" v-model="showPopup">
		    <view>弹窗内容</view>
		</hqs-popup>
	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
	export default {
		components: {
			freeNavBar
		},
		data() {
			return {
				showPopup: false,
				params: {
					name: '',
					type: null,
					address: '',
					mode: '',
					desc: '',
					full_name: '',
					phone: '',
					business_license: '',
					status: 0
				}
			}
		},
		created() {
			
		},
		methods: {
			handleFruits() {
				this.showPopup = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.reflect-page {
		position: relative;
		height: 470rpx;
		background: linear-gradient(134deg, #FC6163 0%, #FF4142 100%);
		
		/deep/ .other-head-mod,
		/deep/ .wx-head-mod{
			background-color: transparent !important;
			border: none !important;
			
			.other-head-mod-mian-title {
				color: #fff !important;
			}
		}
		.perfect-wrapper {
			padding: 0 20px;
			padding-top: 38rpx;
			
			.perfect__head {
				.text {
					display: block;
					font-size: 28rpx;
					line-height: 40rpx;
					color: #fff;
				}
				.price {
					display: block;
					font-size: 48rpx;
					line-height: 67rpx;
					margin-top: 17rpx;
					color: #fff;font-weight: bold;
				}
			}
			.perfect__body {
				position: absolute;
				top: 100%;
				left: 50%;
				transform: translateX(-50%);
				width: 95%;
				margin-top: -157rpx;
				z-index: 9;
				
				.perfect__body--top {
					background: #FFFFFF;
					border-radius: 8px;
					padding: 30rpx 20rpx;
					
					.title {
						height: 40rpx;
						line-height: 40rpx;
						font-size: 28rpx;
					}
					.perfect__info {
						height: 78rpx;
						line-height: 78rpx;
						margin-top: 18rpx;
						align-items: center;
						justify-content: space-between;
						.input-wrapper {
							align-items: center;
						}
						.label {
							font-size: 56rpx;
							margin-right: 10rpx;
						}
						.perfect__all--btn {
							color: #FC6163;
							height: 78rpx;
							font-size: 28rpx;
							cursor: pointer;
						}
					}
					.perfect__to {
						height: 60rpx;
						line-height: 60rpx;
						margin-top: 52rpx;
						align-items: center;
						justify-content: space-between;
						
						.perfect__to--title,
						.select__content{
							font-size: 28rpx;
						}
						
						.perfect__to--select {
							align-items: center;
							cursor: pointer;
						}
						
						.sprite {
							display: block;
							margin-left: 20rpx;
						}
					}
				}
				.perfect__body--btns {
					margin-top: 20rpx;
					height: 74rpx;
					line-height: 74rpx;
					border-radius: 200px;
					color: #fff;
					font-size: 28rpx;
					justify-content: center;
					align-items: center;
					background: #FD5052;
					cursor: pointer;
				}
			}
		}
	}
</style>
